<template>
  <view
    class="tn-stack-swiper-class tn-stack-swiper"
    :style="{
      width: $t.string.getLengthUnitValue(width),
      height: $t.string.getLengthUnitValue(height)
    }"
  >
    <swiper
      class="home-swipers-w"
      :autoplay="false"
      :indicator-dots="false"
      @change="changeSwiper"
      :vertical="true"
      :circular="true"
      :effect3d="true"
    >
      <swiper-item 
        v-for="(item, index) in list" 
        :key="index" >
        <view class="home-swiper-item">
          <view
            class="tn-stack-swiper__item home-swiper-item"
            :id="item.id"
            :class="[`tn-stack-swiper__item--${direction}`]"
            :data-index="index"
          >
            <view class="home-swiper-bg"
             :style="{
               'background-image': `url(${item.image})`
             }"
            >
              <view class="home-swiper-mask">
                <view class="dinner-tags-wrap">
                  <view class="dinner-tags">
                    <view 
                     v-if="labels && labels[0].restaurantsId == item.id"
                     v-for="(label, index) in labels.slice(0, 4)"
                     class="dinner-tag"
                     :class="`dinner-tag-${index%4}`"
                    >
                      <view class="dinner-label-name">
                        <view
                         class="dinner-label-tag"
                         >
                           {{label.label}}
                        </view>
                        <view class="diner-label-amount">
                          <text class="tn-icon tn-icon-close"></text>
                          {{label.amount}}
                        </view> 
                      </view>
                      <view @click="addLabelA(label.label)"
                       class="dinner-tags-praise">
                       <text
                       :class="posting && 'diner-shaking'">+1</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="bottom-content">
                  <view class="home-dishes clamp-text-1">
                    <view class="dinner-dishes">
                      <view class="dish-wraper" v-if="item.foods.length">
                        <view class="dish-section-name">
                          招牌菜
                        </view>
                        <view class="home-dish-grids" hoverClass="none">
                          <view 
                          v-for="(food, index) in item.foods.slice(0,4)" 
                          :key="index" 
                          class="dish-item">
                            <view class="dish-card">
                              <image
                                mode="aspectFill" 
                                class="dish-image" 
                                :lazy-load="true"
                                :src="food.dishAlbums[0] && food.dishAlbums[0].url + '?x-oss-process=image/resize,m_fixed,h_120,w_100'"
                              ></image>
                              <view class="dish-name">
                                {{food.dishName}}
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="tn-righterabsolute">
                    <view class="tn-flex tn-flex-direction-column tn-flex-col-center">
                      <view class="tn-margin-sm tn-radius justify-content-item" >
                        <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                          <view
                            @click="likeChoose('collect', item)"
                            class="icon__item--icon tn-flex-direction-column tn-flex tn-flex-row-center tn-flex-col-center tn-color-white">
                            <view
                             :class="item.restaurantsLikeBo && item.restaurantsLikeBo.userCollect == 1 ? 'tn-color-red' : 'tn-color-white'"
                             class="xicon-star"></view>
                            <text class="icon__item--text">{{
                              getCount(
                              item.restaurantsLikeBo && item.restaurantsLikeBo.collectCount,
                              '收藏'
                              )
                              }}</text>
                          </view>
                        </view>
                      </view>
                      <view class="tn-margin-sm tn-radius justify-content-item" >
                        <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                          <view
                            @click="likeChoose('like', item)"
                            class="icon__item--icon tn-flex-direction-column tn-flex tn-flex-row-center tn-flex-col-center tn-color-white">
                            <view
                             :class="item.restaurantsLikeBo && item.restaurantsLikeBo.userLike == 1 ? 'tn-color-red' : 'tn-color-white'"
                             class="xicon-praise"></view>
                            <text class="icon__item--text">{{
                              getCount(
                              item.restaurantsLikeBo && item.restaurantsLikeBo.likesCount,
                              '点赞'
                              )
                              }}</text>
                          </view>
                        </view>
                      </view>
                      <view class="tn-margin-sm tn-radius justify-content-item" >
                        <view class="tn-flex tn-flex-direction-column 
                        tn-flex-row-center tn-flex-col-center"> 
                          <view
                            @click="likeChoose('unlike', item)"
                            class="icon__item--icon tn-flex-direction-column tn-flex 
                            tn-flex-col-center tn-color-white">
                            <view :class="item.restaurantsLikeBo && item.restaurantsLikeBo.userNoLike == 1 ? 'tn-color-red' : 'tn-color-white'" 
                            class="xicon-step"></view>
                            <text class="icon__item--text">{{
                              getCount(
                              item.restaurantsLikeBo && item.restaurantsLikeBo.noLikeCount,
                              '不喜欢')
                              }}</text>
                          </view>
                        </view>
                      </view>
                      <!-- 收藏 -->
                      <view class=" tn-margin-sm tn-radius justify-content-item">
                        <view class="tn-flex tn-flex-direction-column 
                        tn-flex-row-center tn-flex-col-center">
                          <view 
                          @click="showComment(item)"
                          class="icon__item--icon tn-flex-direction-column 
                          tn-color-white tn-flex tn-flex-row-center tn-flex-col-center">
                            <view class="xicon-comment"></view>
                            <text class="icon__item--text">评论</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="tn-flex 
                    tn-flex-direction-row
                    shop-content-section
                    tn-flex-row-between
                    tn-flex-col-center">
                    <view class="shop-content-wrap">
                      <view
                        class="shop-content-container"
                      >
                        <view class="shop-content-title">
                          <view class="justify-content-item">
                            <text class="tn-text-bold shop-name">{{ item.title }}</text>
                            <text class="tn-text-bold shop-year
                            tn-padding-left-xs 
                            tn-padding-right-xs"> · {{ item.age || 5}}年</text>
                          </view>
                        </view>
                        <view class="shop-content-fames">
                          <view class="shop-content-fame">
                            双流区美食人气榜第2名
                          </view>
                          <view class="shop-content-location">
                            <text class="xicon-location location-icon"></text>
                            <text class="location-title">{{ formatDistance(item.distance) }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="shop-enter-wrap">
                      <view class="shop-pulse1">
                        <view class="shop-pulse2">
                          <view
                            @click="tn(`/preferredPages/shop?id=${item.id}`)" 
                            class="enter-shop-btn btn--shockwave">
                            <text class="xicon-home tn-xicon"></text>
                            <view class="xicon-text">进店</view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import {
  	restaurantsLike
  } from '@/libs/js/home.js'
  export default {
    name: 'daily-stack-swiper',
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
      labels: {
        type: Array,
        default() {
          return []
        }
      },
      labelsMap: {
        type: Object,
        default() {
          return {}
        }
      },
      // 轮播容器的宽度 rpx
      width: {
        type: [String, Number],
        default: '100%'
      },
      // 轮播容器的高度 rpx
      height: {
        type: [String, Number],
        default: 500
      },
      // 自动切换
      autoplay: {
        type: Boolean,
        default: false
      },
      // 自动切换时长 ms
      interval: {
        type: Number,
        default: 5000
      },
      // 滑动切换移动比例, [0 - 100]
      // 比例相对于item的宽度
      switchRate: {
        type: Number,
        default: 30
      },
      posting: {
        type: Boolean,
        default: false,
      },
      // 滑动方向
      // horizontal -> 水平 vertical -> 垂直
      direction: {
        type: String,
        default: 'vertical'
      }
    },
    data() {
      return {
        showCpop: false,
        autoplayTimer: null,
        // window窗口的宽度
        windowWidth: 0,
        show: false,
        // 轮播item的宽度
        swiperItemWidth: 0,
        // 轮播item的高度
        swiperItemHeight: 0,
        // 当前选中的轮播item
        swiperIndex: 0,
        // 当前实际的index
        realIdx: 0,
        // 标记是否开始触摸
        touching: true,
        // 轮播列表信息
        showLabels: []
      }
    },
    computed: {
      itemData() {
        return {
          windowWidth: this.windowWidth,
          itemWidth: this.swiperItemWidth,
          itemHeight: this.swiperItemHeight,
          direction: this.direction,
          autoplaying: this.autoplayFlag
        }
      }
    },
    created() {
    },
    mounted() {
    },
    destroyed() {
    },
    methods: {
      getCount(c, d) {
        if(this.$t.number.isNumber(c)){
          if(c > 10000){
            return (c / 10000).toFixed(2) + '万'
          }
          return c;
        }else{
          return d;
        }
      },
      changeSwiper(e){
        if(+e.detail.current > +this.swiperIndex){
          this.realIdx += 1;
        }else{
          this.realIdx -= 1;
        }
        this.swiperIndex = e.detail.current;
        this.$emit('change',  this.swiperIndex, this.realIdx)
      },
      likeChoose(operaType, item) {
      	const data = {
      		"restaurantsId": item.id,
      	}
      	if (operaType === 'like') {
          if(item.restaurantsLikeBo && +item.restaurantsLikeBo.userLike == 1){
            data.likes = '0'
          }else{
            data.likes = '1'
          }
      	} else if (operaType === 'unlike') {
          if(item.restaurantsLikeBo && +item.restaurantsLikeBo.userNoLike == 1){
            data.noLike = '0'
          }else{
            data.noLike = '1'
          }
      	} else if (operaType === 'collect') {
          if(item.restaurantsLikeBo && +item.restaurantsLikeBo.userCollect == 1){
            data.collect = '0'
          }else{
            data.collect = '1'
          }
      	}
        restaurantsLike(data).then((res) => {
          if(res.code === 0){
            if(!item.restaurantsLikeBo){
              item.restaurantsLikeBo = {
                collectCount: 0,
                likesCount: 0,
                noLikeCount: 0,
                postCount: 0
              }
            }
            if (operaType === 'like') {
              if(+item.restaurantsLikeBo.userLike == 1){
                item.restaurantsLikeBo.userLike = 0
                item.restaurantsLikeBo.likesCount -= 1;
              }else{
                item.restaurantsLikeBo.userLike = 1;
                item.restaurantsLikeBo.likesCount += 1;
              }
            } else if (operaType === 'unlike') {
              if(+item.restaurantsLikeBo.userNoLike == 1){
                item.restaurantsLikeBo.userNoLike = 0
                item.restaurantsLikeBo.noLikeCount -= 1;
              }else{
                item.restaurantsLikeBo.userNoLike = 1
                item.restaurantsLikeBo.noLikeCount += 1;
              }
            } else if (operaType === 'collect') {
              if(+item.restaurantsLikeBo.userCollect == 1){
                item.restaurantsLikeBo.userCollect = 0
                item.restaurantsLikeBo.collectCount -= 1;
              }else{
                item.restaurantsLikeBo.userCollect = 1
                item.restaurantsLikeBo.collectCount += 1;
              }
            }
          }
        })
      },
      // 更新轮播容器信息
      formatDistance(distance){
        if(distance> 1000){
          return (distance / 1000).toFixed(1) + 'km'
        }else{
          return Math.floor(distance) + 'm'; 
        }
      },
      showComment(itemData) {
        this.showCpop = true; 
        this.$emit('showCpop', itemData);
      },
      pagesLoad() {
        this.show = true;
      },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      addLabelA(label) {
        this.$emit('addLabel', label)
      },
      // 修改触摸状态
      changeTouchState(e) {
        this.touching = e.touching
      },
      // 打印日志
      printLog(data) {
        console.log("log", data);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tn-righterabsolute{
    position: absolute;
    right: 0px;
    bottom: 226rpx;
      
    .tn-margin-sm{
      margin: 16rpx;
    }
  }
  $easing: cubic-bezier(.33,.33,.33,1);
  @mixin afterBg {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
  }
  
  // Shockwave
  .btn--shockwave {

    &:after {
      @include afterBg;
      animation: shockwave 1s .65s ease-out infinite;
    }
    
    &:before {
      @include afterBg;
      animation: shockwave 1s .5s ease-out infinite;
    }
  }
  
  @keyframes shockwaveJump {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.08);
    }
    50% {
       transform: scale(0.98);
    }
    55% {
      transform: scale(1.02);
    }
    60% {
      transform: scale(0.98);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes shockwave {
    0% {
      transform: scale(1);
      box-shadow: 0 0 2px rgba(244, 164, 49, .1), inset 0 0 1px rgba(244, 164, 49, 1);
    }
    95% {
      box-shadow: 0 0 50px rgba(0,0,0,0), inset 0 0 30px rgba(0,0,0,0);
    }
    100% {
      transform: scale(1.25);
    }
  }
  .home-swipers-w{
    height: 100%;
  }
  .bottom-content{
    margin: 0;
    width: 100%;
    background-color: none;
    position: relative;
    .shop-content-section{
      margin: 48rpx 32rpx 42rpx 0;
      .shop-content-wrap{
          display: flex;
          flex-grow: 1;
          flex-direction: column;
          margin-right: 52rpx;
          .shop-content-container{
            background: #EC5446;
            width: 100%;
            padding: 24rpx 32rpx;
            border-radius: 0px 80rpx 80rpx 0px;
            .justify-content-item{
              display: flex;
              flex-direction: row;
              align-items: center;
            }
            .shop-name{
              width: 300rpx;
              display: block;
              line-height: 44rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 32rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }
            .shop-year{
              line-height: 44rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 32rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }
            .shop-content-fames{
              display: flex;
              flex-direction: row;
              align-items: center;
              white-space: nowrap;
              justify-content: flex-start;
              margin-top: 8rpx;
              .shop-content-fame{
                line-height: 28rpx;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #FF8800;
                padding: 4rpx 16rpx;
                background-color: rgba(254, 226, 186, 1);
                border-radius: 4rpx;
              }
              .shop-content-location{
                .location-icon{
                  font-size: 16rpx;
                  margin: 0 8rpx 0 16rpx;
                  color: #fff;
                }
                .location-title{
                  font-size: 24rpx;
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                }
              }
            }
          }
      }
      .shop-enter-wrap{
        .shop-pulse1{
          width: 136rpx;
          height: 136rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 100%;
          
          .shop-pulse2{
            width: 116rpx;
            height: 116rpx;
            border-radius: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .enter-shop-btn{
              width: 96rpx;
              height: 96rpx;
              border-radius: 96rpx;
              background-color: rgba(244, 164, 49, 1);
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;
              justify-content: center;
              .xicon-home{
                color: #fff;
                margin-top: -10rpx;
                font-size: 32rpx;
              }
              .xicon-text{
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
              }
            }
          }
        }
      }
    }
    
  }
  
  @keyframes pulse {
    0% {
      translate: transform(scale(.9));
    }
    100% {
      translate: transform(scale(1));
      box-shadow: 0 0 0 20rpx rgba(244, 164, 49, 0.1);
    }
  }
  .tn-stack-swiper {
    position: relative;
    .home-swiper-item{
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
      .home-swiper-bg{
        height: 100%;
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
      }
      .home-swiper-mask{
        height: 100%;
        background: linear-gradient(180deg, rgba(38,38,38,0) 0%, rgba(0,0,0,0.7) 100%);
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
      }
    }
    &__item {
      position: absolute;
      background-color: none;
      border-radius: 32rpx;
      overflow: hidden;
      
      &--vertical {
        width: 100%;
        height: 100%;
        transform-origin: top center;
      }
      
      &__transition {
        transition-property: transform,opacity;
        transition-duration: 0.25s;
        transition-timing-function: ease-out;
        // transition: transform, opacity 0.25s ease-in-out !important;
      }
    }
    
    &__image {
      width: 100%;
      height: 480rpx;
      overflow: hidden;
    }
    &__text {
      width: 100%;
      position: relative;
      margin-top: 0;
      z-index: 9999;
    }
  }
  .dinner-dishes{
    .dish-wraper{
      margin: 0rpx;
      border-radius: 0rpx;
      overflow: hidden;
      border: none;
      min-height: 550rpx;
      padding: 0rpx 124rpx 0rpx 48rpx;
      .dish-section-name{
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        letter-spacing: 12rpx;
        margin-bottom: 32rpx;
      }
      .dish-item{
        padding: 0rpx;
        background: none;
        width: 248rpx;
        height: 220rpx;
        border-radius: 20rpx;
        overflow: hidden;
        background-color: rgba(26, 26, 26, 0.3);
        background-size: cover;
        position: relative;
      }
      .home-dish-grids{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-column-gap: 20rpx;
        grid-row-gap: 20rpx;
        justify-items: stretch;
      }
      .dish-card{
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
        opacity: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.3);
        .dish-image{
          width: 228rpx;
          height: 148rpx;
          background: #FFFFFF;
          border-radius: 20rpx;
          opacity: 1;
        }
        
        .dish-name{
          white-space: nowrap;
          overflow: hidden;
          max-width: 100%;
          z-index: 9;
          text-align: center;
          margin-top: 10rpx;
          width: 100%;
          text-overflow: ellipsis;
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
        }
      }
    }
  }

  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .restaurant-title{
    white-space: nowrap;
  }
  
  .icon {
  	&__item {
  		background-color: transparent;
  		transform: scale(1);
  		transform-origin: center center;
  		&--icon {
  			width: 90rpx;
  			font-size: 60rpx;
        border-radius: 50%;
  			margin-top: 5rpx;
  			position: relative;
  			z-index: 1;
  			background-color: transparent;
        .xicon-*{
          
        }
        span, .icon__item--text{
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          letter-spacing: 2rpx;
        }
  		}
  	}
  }
  
</style>
